<template>
  <div class="app-areaSelect" :style="{width:width}">
    <el-breadcrumb v-if="showParents" class="breadcrumb-box" separator="/">
      <el-breadcrumb-item v-for="(item,index) in areaOptions.parents" :key="index">{{item.areaName}}</el-breadcrumb-item>
      <el-breadcrumb-item>{{areaOptions.areaName}}</el-breadcrumb-item>
      <span></span>
    </el-breadcrumb>
    <el-cascader v-loading="loading" :size="size" :show-all-levels="showAllLevels" v-model="areaSeleted" class="flex-1" :options="options" :props="{checkStrictly: checkStrictly, value:valueKey,label:'areaName'}" @change="areaChange" :placeholder="placeholder" clearable></el-cascader>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name:'AreaSelect',
  props: {
    valueKey: {
      type: String,
      default: "areaCode"
    },
    placeholder: {
      type: String,
      default: "请选择"
    },
    showParents: {
      type: Boolean,
      default: false
    },
    showAllLevels: {
      type: Boolean,
      default: true
    },
    checkStrictly: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: ""
    },
    areaDefault: {
      type: Array,
      default: ()=>[]
    },
    width: {
      type: String,
      default: ""
    },
  },
  data() {
    return {
      loading: true,
      options: [],
      areaSeleted:[]
    }
  },
  computed: {
    ...mapGetters(['areaOptions'])  
  },
  watch: {
    areaDefault(value) {
      this.areaSeleted = value.filter(row=>row).splice(this.areaOptions.level)
    }
  },
  created() {
    setTimeout(()=>{
      this.options = this.areaOptions.children
      this.loading = false
    },100)
    this.areaSeleted = this.areaDefault.filter(row=>row).splice(this.areaOptions.level)
  },
  methods: {
    areaChange(data){
      let areaCodes = this.areaOptions.parents.map(row=>row[this.valueKey])
      // areaCodes.push(this.areaOptions[this.valueKey])
      areaCodes = [...areaCodes,...data]
      this.$emit('change',areaCodes)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-areaSelect {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  .breadcrumb-box{
    margin-right: 10px;
  }
}
</style>
